<template>
  <div>
    <a-table :loading="loading" :columns="columns" :data-source="data" rowKey="id">
      <a slot="description" slot-scope="description">{{ description }}</a>
      <span slot="customTitle"><a-icon type="smile-o"/> 商品名称</span>
      <span slot="action" slot-scope="text, record">
        <a-button @click="handleUpdate(record)" type="link"><a-icon type="edit"/></a-button>
      </span>
    </a-table>

    <a-modal
        title="修改价格"
        :visible="visible"
        cancelText="返回"
        okText="确认"
        @ok="submit"
        @cancel="cancel"
    >
      <a-input-number id="input" v-model="form.price" :min="1"/>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    key: 'description',
    dataIndex: 'description',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'description'},
  },
  {
    title: '价格',
    key: 'price',
    dataIndex: 'price',
  },
  {
    title: '更多操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
];

export default {
  name: "TolRule",
  data() {
    return {
      loading: false,
      data: [],
      columns,
      visible: false,
      form: { price: 1.00 }
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    loadTableData() {
      this.loading = true
      this.getRequest('/api/rule/').then(resp => {
        if (resp) {
          this.data = resp
          this.loading = false
        }
      })
    },
    handleUpdate(record) {
      this.form = record
      this.visible = true
    },
    submit() {
      this.putRequest('/api/rule/', this.form).then(resp => {
        if (resp) {
          this.visible = false
          this.loadTableData()
        } else {
          this.visible = false
        }
      })
    },
    cancel() {
      this.visible = false
      this.form = { price: 1.00 }
      this.loadTableData()
    }
  }
}
</script>

<style scoped>

</style>